<template>
  <NavBack title="确认订单"></NavBack>
  <div class="address" @click="onAdd">
    <!-- onAdd -->
    <van-icon name="location-o" />
    <p v-if="showadd">请选择地址</p>
    <div v-else id="showadd">
      <p>{{ defaultadd.name }}</p>
      <p>{{ defaultadd.tel }}</p>
      <p>{{ defaultadd.province }}</p>
    </div>
    <van-icon name="arrow" />
  </div>
  <!-- 彩灯 -->
  <p class="p-img"></p>
  <!-- 彩灯↑ -->
  <div class="orderdeate">
    <div class="orderdeate-one">
      <img src="../../../public/imgs/logo.png" alt="" />
      <p>嗨购自营</p>
    </div>
    <van-notice-bar
      left-icon="service-o"
      text="恭喜你，挑选的商品好评高达99%"
    />
  </div>
  <van-card
    v-for="item in cartList"
    :key="item.cartid"
    :num="item.num"
    :price="item.originprice"
    :desc="item.proname"
    :thumb="item.img1"
  />
  <van-submit-bar :price="totalMoney" button-text="去支付" @submit="onSubmit" />
</template>

<script>
import NavBack from "../../components/NavBack.vue";
import { showSuccessToast, showFailToast } from "vant";
export default {
  data() {
    return {
      cartList: "",
      defaultadd: [],
      useradd: "",
    };
  },
  components: {
    NavBack,
  },
  // /cart/selectone
  name: "confirmorder",
  created() {
    this.useradd = this.$route.query.userid;
    this.cartList = JSON.parse(localStorage.getItem("cartList"));
    // console.log(this.cartList);
    this.$http({
      url: "/address/defaultAddress",
      method: "post",
      data: {
        userid: localStorage.getItem("userid"),
      },
    }).then((res) => {
      // console.log(res.data);
      this.defaultadd = res.data.data[0];
      // console.log(this.defaultadd);
    });
  },
  methods: {
    onAdd() {
      this.$router.push("/myaddress");
    },
    onSubmit() {
      // /address/defaultAddress
      // const now = new Date();

      // const year = now.getFullYear();
      // const month = ("0" + (now.getMonth() + 1)).slice(-2);
      // const day = ("0" + now.getDate()).slice(-2);
      // const hours = ("0" + now.getHours()).slice(-2);
      // const minutes = ("0" + now.getMinutes()).slice(-2);
      // const seconds = ("0" + now.getSeconds()).slice(-2);

      // const formattedTime =
      //   year +
      //   "/" +
      //   month +
      //   "/" +
      //   day +
      //   " " +
      //   hours +
      //   ":" +
      //   minutes +
      //   ":" +
      //   seconds;

      // /order/addOrder

      if (this.defaultadd != undefined) {
        this.$http({
          url: "/order/addOrder",
          method:"post",
          data: {
            userid: localStorage.getItem("userid"),
          },
        }).then((res) => {
          console.log(res);
          this.$router.push("./copy");
        });
        // localStorage.setItem("formattedTime", formattedTime);
      } else {
        // showSuccessToast("成功文案");
        showFailToast("请选择默认地址");
      }
    },
  },
  computed: {
    totalMoney() {
      let money = 0;
      let discount1 = 0;
      this.cartList.forEach((element) => {
        discount1 = element.originprice * (element.discount * 0.1);
        money += element.num * discount1;
      });
      return money * 100;
    },
    showadd() {
      if (this.defaultadd == undefined) {
        return true;
      } else {
        return false;
      }
    },
  },
};
</script>

<style scoped>
/deep/.van-card__price-integer {
  color: red;
}
/deep/.van-card__price-currency {
  color: red;
}
.address {
  display: flex;
  justify-content: space-between;
  width: 95%;
  margin: 20px auto;
  height: 60px;
  align-items: center;
  font-size: 30px;
  color: rgb(255, 96, 16);
}
.p-img {
  height: 10px;
  width: 100%;
  margin-top: -18px;
  background-image: url(../../../public/imgs/1111111.png);
  border-radius: 10px;
}
#showadd {
  display: flex;
  color: rgb(104, 104, 104);
  font-size: 14px;
  /* background-color: red; */
  width: 80%;
  font-size: 16px;
  align-items: center;
  justify-content: space-around;
}
.orderdeate {
  min-height: 60px;
  width: 95%;
  margin: 10px auto;
  background-color: rgba(188, 188, 188, 0.171);
  border-radius: 10px 10px 0 0;
}
.orderdeate-one {
  display: flex;
  height: 20px;
  align-items: center;
  color: red;
  padding: 10px;
}
.orderdeate-one p {
  margin-left: 20px;
  font-size: 14px;
}
</style>